<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body >

<div th:fragment="head">
    <div  style="background-color:white;display:flex;justify-content:space-between;min-width:1400px;border-bottom:1px solid darkgray;line-height:60px">

        <div style="width:30%">
            <p style="padding-left: 20px"><a href="/" style="color:black">首页</a></p>
        </div>

        <div style="width:20%">
            <el-input placeholder="根据标题搜索" v-model="searchTitle">
                <el-button slot="append" icon="el-icon-search" @click="findByTitle()"></el-button>
            </el-input>
        </div>

        <div style="width:18%">
            <el-menu class="el-menu-demo" mode="horizontal" style="display:flex;justify-content:space-between;">

                <el-menu-item index="1" style="width:40%">
                    <el-dropdown th:if="${session.SPRING_SECURITY_CONTEXT != null}">
                        <div>
                            <el-avatar  icon="el-icon-user-solid" >
                            </el-avatar>
                            <span th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.nickname}"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><a href="/api/hello/home">个人中心</a></el-dropdown-item>
                            <el-dropdown-item><a href="/logout">退出登录</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <a href="/login" th:if="${session.SPRING_SECURITY_CONTEXT == null}">登录/注册</a>
                </el-menu-item>

                <el-menu-item index="2">
                    <el-button round size="mini"><a href="/api/hello/publish">发表博客</a></el-button>
                </el-menu-item>

            </el-menu>
        </div>

    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{

            }
        },
        methods:{
            findByTitle(){

            }
        },
        mounted(){

        }
    })
</script>
<style>
    a{
        text-decoration:none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:none;
        color: #303133;
    }

</style>
</html>